<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/appjs/app.min.css">
<style>
/* TODO */
</style>
</head>

<body>
	<div class="app-page" data-page="home">
		<!-- topbar defined -->
		<div class="app-topbar">
			<div class="app-title">${hello}</div>
		</div>
		<!-- content defined -->
		<div class="app-content">
			<div class="app-section">
				<div class="app-button" data-target="page2">Go to Page 2</div>
				<div class="app-button" data-target="contact">Go to Contact</div>
				<div class="app-button" data-target="viewer"
					data-target-args="{urls: [
					'http://i.imgur.com/yDK68Ff.jpg',
					'http://i.imgur.com/rKIESYd.jpg',
					'http://i.imgur.com/OTaodxO.jpg'
  					]}">Go
					to Viewer</div>
			</div>
		</div>
	</div>

	<div class="app-page" data-page="page2">
		<!-- topbar defined -->
		<div class="app-topbar">
			<div class="app-button left" data-back data-autotitle></div>
			<div class="app-title">Page 2</div>
		</div>
		<!-- content defined -->
		<div class="app-content">
			Page 2 is lonely
			<div class="app-section">
				<input class="app-input" placeholder="Subject">
				<textarea class="app-input" placeholder="Message"></textarea>
				<div class="app-button">Send</div>
			</div>


		</div>

	</div>

	<div class="app-page" data-page="contact">
		<div class="app-topbar">
			<div class="app-button left" data-back data-autotitle></div>
			<div class="app-title">Contact</div>
		</div>
		<div class="app-content">
			<ul class="app-list">
				<label>Animals</label>
				<li>Dogs</li>
				<li>Cats</li>
				<label>Fruits</label>
				<li>Apples</li>
				<li>Oranges</li>
			</ul>
		</div>
	</div>

	<script src="http://cdn.kik.com/photo-viewer/1/photo-viewer.js"></script>

	<div class="app-page dark-page" data-page="viewer">
		<div class="app-topbar">
			<div class="left app-button" data-back data-autotitle></div>
			<div class="app-title">Viewer</div>
		</div>
		<div class="app-content"></div>
	</div>

	<script src="${pageContext.request.contextPath}/appjs/zepto.js"></script>
	<script src="${pageContext.request.contextPath}/appjs/app.min.js"></script>
	<script>
		/**
		 * defined business logic in home controller
		 */

		function doStuff() {
			console.log("key pressed");
		}

		function HomeController(page) {
			// this runs whenever a 'home' page is loaded
			this.foo = 'bar';
			this.print();

			window.addEventListener('keypress', doStuff);
			$(page).on('appDestroy', function() {
				window.removeEventListener('keypress', doStuff);
			});
		}

		HomeController.prototype.onShow = function() {
			console.log('the user can see it');
		};

		HomeController.prototype.print = function() {
			console.log(this.foo);
		};

		App.controller('home', HomeController);

		App.controller('page2', function(page) {
			console.log("turned to page 2");
		});

		App.controller('contact', function(page, contact) {
			var contact = {
				firstName : 'Bruce',
				lastName : 'Lee'
			};
		});

		App.controller('viewer', function(page, data) {
			var photoViewer = new PhotoViewer(page, data.urls);
		});

		try {
			App.restore();
		} catch (err) {
			App.load('home');
		}
	</script>
</body>
</html>
